<template>
  <div>
    <h1>员工管理</h1>
    <Input placeholder="请输入搜索内容"
           style="width: 300px"
           v-model="keyword" /> <Button type="primary"
            @click="search()">点击搜索</Button>
    <div class="table">
      <Table border
             :columns="columns12"
             :data="data6">
        <template slot-scope="{ row }"
                  slot="id">
          <strong>{{ row.id }}</strong>
        </template>
        <!-- 括号里面原本有一个index的 -->
        <template slot-scope="{ row }"
                  slot="action">
          <Button type="primary"
                  size="small"
                  style="margin-right: 5px"
                  @click="show(row)">修改</Button>
          <Button type="error"
                  size="small"
                  @click="remove(row.staff_id)">删除</Button>
        </template>
        <!-- <div style="display:none;" id="test" slot="content">aaa</div> -->
      </Table>

    </div>

    <div class="page">
      <Page :total="dataCount"
            :page-size="pageSize"
            @on-change="changepage" />
    </div>

    <popup :show="isShow"
           close
           @close="closeShow"
           tit="修改员工信息">
      <div class="update_staff">
        <Form :label-width="80">
          <FormItem label="修改姓名">
            <Input v-model="showData.nickname"
                   placeholder="输入修改的名称" />
          </FormItem>

          <FormItem label="更换职位">
            <Select v-model="showData.job_id">
              <Option :value="item.jid"
                      v-for="(item, index) in jobs"
                      :key="index"
                      :selected="showData.job_id == item.jid">{{item.name}}</Option>

            </Select>
          </FormItem>

          <FormItem>
            <Button type="primary"
                    @click="update">确定</Button>
            <Button style="margin-left: 8px"
                    @click.native="isShow = false">取消</Button>
          </FormItem>
        </Form>

      </div>
    </popup>

  </div>
</template>
<script>
import { StaffManage } from '../../../server/home.js'
import { Staffedit } from '../../../server/home.js'
import { Staffdel } from '../../../server/home.js'
import { Searchcontent } from '../../../server/home.js'

import { getJob,updateStaff } from 'server/admin_k.js'

export default {
  data() {
    return {
      keyword: '',
      ajaxHistoryData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 2,
      isShow: false,
      columns12: [
        {
          title: 'id',
          key: 'staff_id'
        },
        {
          title: '名字',
          key: 'nickname'
        },
        {
          title: '账号',
          key: 'acc'
        },
        {
          title: '注册时间',
          key: 'create_time'
        },
        {
          title: '职位',
          key: 'name'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data6: [],
      showData: {},
      jobs: []
    }
  },
  methods: {
    _getJob() {
      getJob().then(res => {
        this.jobs = res.data
      })
    },
    async update() {





      if (!this.$rex.name(this.showData.nickname)) {
        return this.$show.open2('员工姓名请输入1-10位的字母、中文或数字')
      }
    
      const data = {
        nickname: this.showData.nickname,
        job_id: this.showData.job_id,
        staff_id:this.showData.staff_id,
      }

      const res = await updateStaff(data)
      if (res.err_code == 1000) {
        this.isShow = false
        // 修改表格中的数据
        const index  = this.data6;
        index.forEach(v=>{
          if (v.staff_id ===this.showData.staff_id) {
         
            v.nickname = this.showData.nickname
            v.job_id = this.showData.job_id
          }
        })
     
        this.data6 = index

        this.$Message.success('修改成功')
        return
      }

    },
    //修改状态里面的确定按钮’
    exsitStateBtn() {
      var data = {
        id: this.exsitStateID,
        Btntypedata: this.exsitStateValue
      }

      stateValue(data).then(res => {
        this.callFun()
        this.state = false
      })
    },
    //删除模态框里面的删除确定
    del() {
      var data = {
        id: this.delID
      }

      Staffdel(data).then(res => {
        alert(res.message)
        this.callFun()
        this.delModel = false
      })
    },
    // 关闭弹窗
    closeShow() {
      this.isShow = false
    },

    //修改状态
    stateValueBtn(id, Btntypedata) {
      ;(this.exsitStateID = id),
        (this.exsitStateValue = Btntypedata),
        (this.state = true)
    
    },
    show(index) {
      this.showData = JSON.parse(JSON.stringify(index))

      this.isShow = true

      return
    },
    //删除
    remove(id) {
      Staffdel(id).then(res => {
        alert(res.message)
      })
    },


 
    search() {
      var data = {
        content: this.keyword
      }

      Searchcontent(data).then(res => {
        //  alert(res.message);
        this.data6 = res
        this.handleListApproveHistory()
      })
    },
    // 网上的代码，分页的代码区分开
    handleListApproveHistory() {
      this.ajaxHistoryData = this.data6 // 取到的所有数据，用数组装起来
      this.dataCount = this.data6.length //拿到数据长度，绑定到页码上，作为总数据
      // 当长度小于定的每页显示数据数时
      if (this.columns12.length < this.pageSize) {
        this.data6 = this.ajaxHistoryData //让打印的数据全部显示出来，例如最后一页的时候，例如有三条一页，但只剩两页，就全显示出来
      } else {
        this.data6 = this.ajaxHistoryData.slice(0, this.pageSize) //否则的话，就按照规定的每页几条出来
      }
    },
    changepage(index) {
      var _start = (index - 1) * this.pageSize //开始的位置
      var _end = index * this.pageSize
      this.data6 = this.ajaxHistoryData.slice(_start, _end) //结束的位置
    }

    //网上的代码区分开
  },
  created() {
    var data = {
      content: this.keyword
    }
    this._getJob()

    StaffManage(data).then(res => {
      this.data6 = res

      this.handleListApproveHistory()
    })
  }
}
</script>

<style scoped>

.table{
  margin: 20px 0;
}
.update_staff {
  padding: 30px;
}
.edixtName {
  border-radius: 5px;
  border: none;
  outline: none;
  width: 280px;
}
.edixtName:hover {
  box-shadow: 0 0 5px rgba(255, 162, 0);
  border: 1px solid #559fed;
  background-color: #559fed;
  color: white;
}
.edixtAcc {
  border-radius: 5px;
  border: none;
  outline: none;
  width: 280px;
}
.edixtAcc:hover {
  box-shadow: 0 0 5px rgba(255, 162, 0);
  border: 1px solid #559fed;
  background-color: #559fed;
  color: white;
}
.edixtPwd {
  border-radius: 5px;
  border: none;
  outline: none;
  width: 280px;
}
.edixtPwd:hover {
  box-shadow: 0 0 5px rgba(255, 162, 0);
  border: 1px solid #559fed;
  background-color: #559fed;
  color: white;
}

.edixtPosition {
  border-radius: 5px;
  border: none;
  outline: none;
  width: 280px;
}
.edixtPosition:hover {
  box-shadow: 0 0 5px rgba(255, 162, 0);
  border: 1px solid #559fed;
  background-color: #559fed;
  color: white;
}
.edixtBtn {
  color: white;
  background-color: #559fed;
  width: 218px;
  height: 35px;
  border-radius: 5px;
  width: 280px;
}
.edixt_Tis {
  color: red;
}
</style>